import ProductNameChoose from "@/components/Common/ProductNameChoose";
import { moneyFormat } from "@/utils/utils";
import { UploadOutlined } from "@ant-design/icons";
import TabPane from "@ant-design/pro-card/lib/components/TabPane";
import ProForm, { DrawerForm, ModalForm, ProFormDatePicker, ProFormDigit, ProFormGroup, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form"
import { PageContainer } from "@ant-design/pro-layout"
import ProTable, { EditableProTable, ProColumns } from "@ant-design/pro-table"
import { Button, Card, Descriptions, InputNumber, Table, Tabs, Upload } from "antd";
import { useState } from "react";

export default () => {
  const [activeKey,setActiveKey] = useState("tab1");
  const [tabKey,setTabKey] = useState("1");
  const [editableKeys, setEditableRowKeys] = useState<any>({});
  const [proModalVisible,setProModalVisible] = useState(false);
  const [showPack,setShowPack] = useState(false);
  const [packData,setPackData] = useState<any>([{name:'A套包',price:75000,id:'1111'},{name:'B套包',price:85000,id:'2222'}]);


  const [showDetail,setShowDetail] = useState(false);
  const [fileList,setFileList] =useState<any>([]);
  const [proData,setProData]  =useState<any>([
    {productId:'1',name:'A套包',num:'3',price:60000,newPrice:72000,sub:[
      {pIndex:0,name:'机器人主机00001',code:'SM*NMW-10200',num:1,price:50000,newPrice:60000},
      {pIndex:1,name:'配件A',code:'SM*NMW-10201',num:1,price:5000,newPrice:6000},
      {pIndex:2,name:'配件B',code:'SM*NMW-10202',num:1,price:5000,newPrice:6000}]}
  , {productId:'2',name:'B套包',num:'3',price:60000,newPrice:72000,sub:[
    {pIndex:0,name:'机器人主机00002',code:'SM*NMW-10203',num:1,price:50000,newPrice:60000},
    {pIndex:1,name:'配件C',code:'SM*NMW-10204',num:1,price:5000,newPrice:6000},
    {pIndex:2,name:'配件D',code:'SM*NMW-10205',num:1,price:5000,newPrice:6000}]}]);

    const clauseColumn:ProColumns[] = [
      {
        title:'条款号',
        dataIndex: 'code',
        ellipsis:true,
        width:100,
        renderText:()=>'1'
      },
      {
        title:'商务条款',
        dataIndex: 'clause',
        ellipsis:true,
        renderText:()=>'条款标题内容'
      },
      {
        title:'条款说明',
        dataIndex: 'summary',
        ellipsis:true,
        renderText:()=>'条款说明内容'
      },
    ]

    const packColumns:ProColumns[] = [
      {
        title:'套包名称',
        dataIndex: 'name',
        // width:150,
        ellipsis:true,
      },
     
      {
        title:'套包金额',
        dataIndex: 'price',
        hideInSearch:true,
      },
      {
          title:'套包说明',
          dataIndex: 'nam',
          hideInSearch:true,
          renderText:()=>''
        },
      {
        title:'创建日期',
        dataIndex: 'name7in8',
        hideInSearch:true,
        renderText:()=>'2022-12-11'
      },
    ]
  const pCreatecolumns:ProColumns[] = [
    {
      title: '套包名称',
      ellipsis: true,
      dataIndex: 'name',
      renderText:(name)=>{
        return <span style={{color:'#1890ff'}}>{name}</span>
      }
    },{
      title: '总数',
      dataIndex: 'num'
    },{
      title: '套包标准价',
      valueType:'money',
      dataIndex: 'price'
    },{
      title: '套包报价',
      valueType:'money',
      dataIndex: 'newPrice'
    },{
      width: 150,
      title: '操作',
      valueType: 'option',
      hideInTable:editableKeys['1']?false:true,
      render: (text, record, _, action) => [<a key='add' onClick={() => {
        setProModalVisible(true)
      }}>
            添加
          </a>]
    }
  ]

  const expandedRowRender = (val:any) => {
    const columns:ProColumns[] = [
   {
      title: '产品名称',
      dataIndex: 'name',
      editable: false
    }, {
      title: '型号',
      dataIndex: 'code',
      editable: false
    }, {
      title: '数量',
      dataIndex: 'num',
      valueType:'digit'
    }, {
      title: '标准价',
      dataIndex: 'price',
      editable: false
    },{
      title: '报价',
      dataIndex: 'newPrice',
      valueType:'money'
    },{
      title: '折扣率',
      dataIndex: 'ratio',
      editable: false,
      renderText:(_,record:any)=>{
        return record.newPrice/record.price
      }
    },{
      title: '操作',
      hideInTable:editableKeys['1']?false:true,
      valueType: 'option',
      width: 150,
      render: () => {
        return null;
      }
    }];
    const data = [...val.sub];
    return <EditableProTable columns={columns} value={data} rowKey='pIndex' toolBarRender={false}  pagination={false} size='small' search={false} toolbar={[]} locale={{
      emptyText: '暂无'
    }} recordCreatorProps={false} onChange={data => {
      var editableKeys: any = editableKeys;
      editableKeys[val.productId] = data.map((item: any) => item.pIndex);
      setEditableRowKeys(editableKeys)
     
    }} editable={{
      editableKeys: editableKeys[val.productId],
      type: 'multiple',
      onChange: v => {
        var editableKeys: any = editableKeys;
        editableKeys[val.productId] = v;
        setEditableRowKeys(editableKeys)
      },
      actionRender: (row, config, defaultDoms) => {
        return [defaultDoms.delete];
      },
      onDelete: async (key: any, record: any) => {
        var newData = val.sub.filter((item: any) => item.id !== record.id);
        val.sub = newData;
        setProData([...proData])
      },
      onValuesChange: (record, recordList) => {
        // console.log(record)
        val.sub = recordList;
        setProData([...proData])
      }
    }}/>;
  };
  const [selectedRowsState, setSelectedRows] = useState<any[]>();

  
  const rowSelection = {
    onChange: (key, selectedRows) => {
      setSelectedRows(selectedRows);
    },
    
  };

  const [dataList,setDataList] =useState<any>([
    {
      name:'OPP.20221201001',
      name1:'上海XXX医院第一次报价',
      name2:'上海XXX医院',
      name4:'李XXX',
      name41:'OPPO.20220501',
    },
    {
      name:'OPP.20221201002',
      name1:'北京XXX医院第一次报价',
      name2:'北京XXX医院',
      name4:'李XXX',
      name41:'OPPO.20220502',
    },
    {
      name:'OPP.20221201003',
      name1:'上海XXX医院第一次报价',
      name2:'上海XXX医院',
      name4:'李XXX',
      name41:'OPPO.20220503',
    },
    {
      name:'OPP.20221201001',
      name1:'北京XXX医院第一次报价',
      name2:'北京XXX医院',
      name4:'赵XXX',
      name41:'OPPO.20220504',
    },
  ]);
  const columns:ProColumns[] = [
    {
      title:'报价编码',
      dataIndex: 'name',
      ellipsis:true,
      width:150,
    },
    {
      title:'报价名称',
      width:150,
      ellipsis:true,
      dataIndex: 'name1',
    },
    {
      title:'客户名称',
      width:150,
      ellipsis:true,
      dataIndex: 'name2',
    },
    {
      title:'客户联系人',
      width:100,
      dataIndex: 'name4',
    },
    {
      title:'折扣',
      width:100,
      dataIndex: 'name5',
      renderText:()=>'1.2'
    },
    {
      title:'关联商机',
      width:150,
      dataIndex: 'name41',

    },
    {
      title:'负责人',
      width:100,
      hideInSearch:true,
      dataIndex: 'name4',
      renderText:()=>'李四'
    },
    {
      title:'协同人',
      hideInSearch:true,
      dataIndex: 'name5',
      width:100,
      renderText:()=>'王五'
    },

    {
      title:'报价日期',
      valueType:'dateRange',
      hideInTable:true,
      dataIndex: 'name71',
    },
    {
      title:'报价日期',
      width:100,
      hideInSearch:true,
      dataIndex: 'name7',
      renderText:()=>'2022-12-01'
    },
    {
      title:'有效日期',
      hideInSearch:true,
      dataIndex: 'name8',
      width:100,
      renderText:()=>'2022-12-31'
    },
    {
      title:'报价状态',
      dataIndex: 'name81',
      ellipsis:true,
      renderText:()=>'已生成合同订单',
      width:100,
      valueType:'select',
      valueEnum:{
        '1':'已生成合同订单',
        '2':'报价中',
        '3':'已结束',
      },
    },
    {
      title: "操作",
      valueType: 'option',
      width:200,
      fixed:'right',
      render: (text, record:any,_, action) => [
       <a key="b2">复制</a>,<a key="b2" onClick={()=>
          {
            setEditableRowKeys({})
            setShowDetail(true)
          }
        }>详情</a>
      ]
    }
  ]

  return (
    <PageContainer>
           <ProTable
      headerTitle=''
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
      toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setEditableRowKeys({'1':[0,1,2],'2':[0,1,2]})
            setShowDetail(true)
          }} >新建</Button>]
        }
     dataSource={dataList}
      scroll={{x:1200}}
      columns={columns}
      rowKey="id"
      search={{span:6}}
      toolbar={{
        menu: {
          type: 'tab',
          activeKey: activeKey,
          items: [
            {
              key: 'tab1',
              label: <span>全部</span>,
            },
            {
              key: 'tab2',
              label: <span>今日新增</span>,
            },
            {
              key: 'tab5',
              label: <span>本周新增</span>,
            },
            {
              key: 'tab3',
              label: <span>我负责的</span>,
            },
            {
              key: 'tab4',
              label: <span>我协同的</span>,
            },
          ],
          onChange: (key) => {
            setActiveKey(key as string);
          },
        },
        settings: [],
      }}
      />
      <DrawerForm title='详情'  width={1200} labelCol={{style:{width:120}}} labelAlign="left" layout="horizontal"
        onFinish={async(values)=>{
          setTabKey('2')
          return false
        }
       }
      
      submitter={{
        
            searchConfig:{
                submitText:tabKey=='1'?"下一步":'保存',
                resetText:"取消"
             }}} visible={showDetail}  onVisibleChange={v=>{setShowDetail(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true
        }}>
       <div style={{position:'fixed',right:50,top:10}}>
                <Button
                                type='primary'
                                key='primary'
                       
                                onClick={async() => {
                                 
                                }}
                                >
                              打印
                 </Button>
            </div>
      <Tabs defaultActiveKey="1" activeKey={tabKey} onTabClick={(key)=>{
        setTabKey(key)
      }}  centered style={{backgroundColor:'#fff',padding:'0 20px 20px 20px'}}>
         <TabPane tab="基本信息" key="1" >
          <div style={{height:20}}></div>
          {
           editableKeys['1']?
           <><ProFormGroup>
           <ProFormText name="name1" width={'md'} label="报价名称" rules={[{ required: true}]}/>
           <ProFormSelect name="name91" width={'md'} label="报价状态" options={[{label:'报价中',value:'0'}]} />
         </ProFormGroup>
         <ProFormGroup>
         <ProFormText name="name3" width={'md'} disabled label="客户名称" />
         <ProFormText name="name9" width={'md'} label="客户联系人" initialValue={''}/>
         <ProFormText name="name9" width={'md'} label="联系人电话" initialValue={''}/>
         <ProFormText name="name10" width={'md'} label="关联商机" />
         <ProFormSelect name="name92" width={'md'} label="阶段" options={[{label:'谈判',value:'0'},{label:'交付',value:'1'}
       ,{label:'搁置',value:'2'},{label:'确认',value:'3'}]} />
         <ProFormSelect name="name93" width={'md'} label="版本号" options={[{label:'V1',value:'0'},{label:'V2',value:'1'}
       ,{label:'V3',value:'2'},{label:'V4',value:'3'}]} />
       </ProFormGroup>
       <ProFormGroup>
           <ProFormText name="name31" width={'md'} disabled label="报价人" />
           {/* <Button style={{marginTop:4}} type='primary'>添加人员</Button> */}
           <ProFormDatePicker name="name32" width={'md'} label='报价日期' />
           <ProFormDatePicker name="name33" width={'md'} label='有效日期' />
       </ProFormGroup>
         <ProFormGroup>
           <ProFormText name="name41" width={'md'} disabled label="负责人" />
           {/* <Button style={{marginTop:4}} type='primary'>添加人员</Button> */}
           <ProFormText name="name42" width={'md'} disabled label="协同人" />
           {/* <Button style={{marginTop:4}} type='primary'>添加人员</Button> */}
         </ProFormGroup>
         <ProFormGroup>
         <ProFormSelect name="name94" width={'md'} label="付款方式" options={[{label:'现金',value:'1'},{label:'转账',value:'2'},{label:'电汇',value:'3'},{label:'支票',value:'4'}]} />
           {/* <ProFormDigit name="c1" width={'md'}  label="整单折扣率"  /> */}
           <ProFormDigit name="c2" width={'md'}  label="其他费用" />
           <ProFormDigit name="c3" width={'md'}  label="优惠金额"/>
           <ProFormDigit name="c4" width={'md'}  label="报价金额"  />
         </ProFormGroup>
         <div style={{height:20}}></div>
         <ProFormTextArea name="name11" width={'lg'} label="备注" /></>:
           <>
             <Descriptions title="" column={3} size="small"  bordered>
                    <Descriptions.Item label="报价名称">北京XXXXX医院的报价单</Descriptions.Item>
                    <Descriptions.Item label="报价状态">报价中</Descriptions.Item>
                    <Descriptions.Item label="客户联系人">张三</Descriptions.Item>
                    <Descriptions.Item label="联系人电话">18790909090</Descriptions.Item>
                    <Descriptions.Item label="关联商机">SJ000-00001</Descriptions.Item>
                    <Descriptions.Item label="阶段">谈判</Descriptions.Item>
                    <Descriptions.Item label="版本号">V1</Descriptions.Item>
                    <Descriptions.Item label="报价金额">¥144,000</Descriptions.Item>
                    <Descriptions.Item label="整单折扣">1.2</Descriptions.Item>
                    <Descriptions.Item label="备注" span={3}>请尽快审核！</Descriptions.Item>
            </Descriptions>
           </>
           }
              <div style={{marginTop:20,marginBottom:10}}>
                非标商务条款
              </div>
              <ProTable
                              headerTitle={false}
                              dataSource={[{}]}
                              columns={clauseColumn}
                              rowKey='id'
                              search={false}
                              key='dealer'
                              toolBarRender={false}
                              toolbar={{settings:[]}}
                              pagination={false}
                              />          
              <div style={{textAlign:'center',padding:'10px 0'}}>
                <Button type="primary">添加</Button>
              </div>
         </TabPane>
         <TabPane tab="编辑明细" key="2" >
       
         <div style={{height:20}}></div>
         {
           editableKeys['1']?
           <ProFormDigit name="c1" width={'md'}  label="整单折扣率"  />:
           <div style={{padding:'10px 0'}}>整单折扣率:1.2</div>
         }
      
       <ProTable className='components-table-demo-nested' 
       
       
       dataSource={proData} columns={pCreatecolumns} rowKey='productId' pagination={false}  toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setShowPack(true)
          }} >选择套包</Button>,<Button
          type="primary"
          key="primary"
          onClick={() => {
            setProModalVisible(true)
          }} >选择产品</Button>]}
      toolbar={{settings:[]}} search={false}
       
       summary={()=>{
        return (
          <>
          <Table.Summary.Row>
            <Table.Summary.Cell index={1} colSpan={1}>总计:</Table.Summary.Cell>
            <Table.Summary.Cell index={1} align='left'>
              6
            </Table.Summary.Cell>

            <Table.Summary.Cell index={1} align='left'>
            ￥{moneyFormat(12000)}
            </Table.Summary.Cell>
            <Table.Summary.Cell index={1} align='left'>
            ￥{moneyFormat(144000)}
            </Table.Summary.Cell>
            {
              editableKeys['1']?
              <Table.Summary.Cell index={1} colSpan={1}>
              </Table.Summary.Cell>:<></>
            }
           
          </Table.Summary.Row>             
        </>
        );
      }}
       expandable={{
          expandedRowRender,
          defaultExpandAllRows: true,
          expandIconColumnIndex: -1
        }}/>
         </TabPane>
      </Tabs>
     

    
{/*           
          <div style={{marginBottom:6}}>附件：</div>
          <Upload fileList={fileList}   data={{'userId':sessionStorage.getItem('userId')}} >
                <Button  icon={<UploadOutlined />}>上传附件</Button>
              </Upload> */}
          
          <ModalForm
            title="套包"
            width={'70%'}
            labelCol={{style:{width:120}}} labelAlign="left" layout="horizontal"
            modalProps={{
              forceRender: true,
                destroyOnClose: true,
            }}
            visible={showPack}
            onVisibleChange={(val)=>{
              setShowPack(val)
            }}
            onFinish={async(value)=>{
              return true;
            }}
          >
               <ProTable
              headerTitle=''
              pagination={{
                pageSizeOptions:['20', '100', '500']
              }}
              toolBarRender={() => []
                }
            dataSource={packData}
            rowSelection={{
              type: "checkbox",
              ...rowSelection,
            }}
              columns={packColumns}
              rowKey="id"
              search={{span:6}}
              toolbar={{
                settings: [],
              }}
              />
          </ModalForm>
          
          <ProductNameChoose
            onCancel={() => {
              setProModalVisible(false)
            }}
            onSubmit={async (value) => {
              setProModalVisible(false)
            }}
            modalVisible={proModalVisible}
            values={[]}
        />
      </DrawerForm>
    </PageContainer>)
}